<template>
    <div class="page">
        <div class="content" id="area" ref="areaBox"></div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            echarts: null,//画布
        }
    },
    methods: {
        // 监听屏幕宽度
        screen() {
            // 检测屏幕大小
            this.echarts.resize();
            // 获取屏幕宽度
            let width = this.$refs.areaBox.offsetWidth;
            console.log(width);
            // 定义标题大小
            let num = (width / 100) * 5;
            // 设置字体大小
            let options = {
                title: {
                    textStyle: {
                        // 设置字体大小
                        fontSize: num
                    }
                }
            }
            // 修改之后需要重新绘制
            this.echarts.setOption(options)
        },
        // 初始化
        initData() {
            let areaBox = this.$refs.areaBox;
            this.echarts = this.$echarts.init(areaBox,this.themeStatus);
            let options = {

            }
            this.echarts.setOption(options)
        },
        // 获取数据
        async getData() {
            let areaData = await this.$axios('/plantingAreaTop');
            areaData.data.sort(function (a, b) {
                return a.area - b.area
            })
            let nameData = areaData.data.map(item => {
                return item.name
            })
            let area = areaData.data.map(item => {
                return item.area
            })
            this.setOption(nameData, area)

        },
        // 绘制图表
        setOption(nameData, area) {

            let options = {
                title: {
                    text: '各地区种植面积统计TOP10',
                    left: 20,
                    top: 20,
                },
                xAxis: {

                },
                yAxis: {
                    data: nameData
                },
                tooltip: {
                    show: true,
                    axisPointer: {
                        type: 'cross'
                    }
                },
                grid:{
                    left:'15%',
                    // top:"10%"
                },

                series: [{
                    type: 'bar',
                    data: area,
                    label: {
                        show: true,
                        position: 'right'
                    },
                    itemStyle: {
                        // 指明颜色渐变的方向
                        color: this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                            {
                                offset: 0,
                                color: '#103559'
                            },
                            {
                                offset: 1,
                                color: '#37C0E6'
                            }
                        ])
                    }

                }]


            }
            this.echarts.setOption(options)
        }
    },
    mounted() {
        this.initData();
        this.getData()
        // 实时监听屏幕宽度
        window.addEventListener('resize', this.screen)
        this.screen();
    },
    watch: {
        // 监听切换主题
        themeStatus(){
            // 销毁之前的实例
            this.echarts.dispose();
            this.initData();
            // let options = {

            // }
            // this.echarts.setOption(options);
            this.getData()
            this.screen();
        }
    },
    computed: {
        themeStatus(){
            return this.$store.state.theme
        }
    },
    filters: {},
    components: {},
}
</script>
<style scoped></style>